<template>
  <div>
    <div class="head">
      <a @click="$router.push({path: '/Snatch'})" class="return"></a>
      <span v-text="type == 1 ? $t('More.v1') : $t('More.v2')"></span>
    </div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <van-pull-refresh :loading-text="$t('MyTeam.v7')" :loosing-text="$t('MyTeam.v8')" @refresh="onRefresh"
                          pulling-text=' ' v-model="isLoading">
          <van-list :finished="finished" :finished-text="$t('More.v3')" :loading-text="$t('MyTeam.v7')" @load="onLoad"
                    v-model="loading">
            <div class="product">
              <div :key="item.id" @click="$router.push({path: '/Details',query: { type : item.id,typeName: 'More'}})"
                   class="product_list" v-for="item in list">
                <div class="product_hd weui-flex">
                  <div class="weui-flex__item">
                    <van-count-down :time="item.lotteryTime - item.systemTime" format="DD 天 HH 时 mm 分 ss 秒后开奖" v-if="leng == 1" />
                    <van-count-down :time="item.lotteryTime - item.systemTime" format="DD D HH T mm M ss S Post-launch" v-if="leng == 2 || leng == undefined" />
                    <van-count-down :time="item.lotteryTime - item.systemTime" format="DD D HH T mm M ss S Thứ hai Hậu ra mắt" v-if="leng == 3" />
                  </div>
                  <div>
                    {{$t('More.v4')}}
                    <span v-text="item.number">13546</span> {{$t('More.v5')}}
                  </div>
                </div>
                <div class="product_content weui-flex">
                  <div class="img"><img :src="item.picture" alt="" style="width: 100px;height: 100px;"></div>
                  <div class="weui-flex__item">
                    <div class="bt" v-text="item.title">苹果手机 标题 in苹果核4G通许手机</div>
                    <div class="btm">
                      <div class="price">
                        <span>¥</span>
                        <span v-text="item.price ? parseFloat(item.price).toFixed(3).slice(0,-1) : '0'">2000</span>
                      </div>
                      <div class="state state1" v-if="item.state == 1">{{$t('More.v6')}}</div>
                      <div class="state state2" v-if="item.state == 0">
                        <span v-text="item.addc ? item.addc : '0'"></span>
                        <span>&nbsp;EXUU</span>
                        <span>{{$t('More.v7')}} &gt</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
    let _this;
    import {recreation} from './../../utils/api';

    export default {
        data() {
            return {
                type: sessionStorage.getItem("typeID"),
                list: [],
                size: 10, //每页数量
                total: '', //总数量
                listLength: '', //当前总数量
                isLoading: false,
                finished: false,
                loading: false,
                leng: ''
            }
        },
        beforeCreate() {

        },
        created() {

        },
        mounted() {
            this.leng = localStorage.leng;
            this.initList();
        },
        methods: {
            initList() {
                this.myInterval = window.setInterval(() => {
                    setTimeout(() => {
                        this.getList();
                    }, 1);
                }, 1000);
            },
            getList() { // 抽奖分类查询
                if (this.type == 1) { // 超级抽奖
                    recreation.getTreasureType2({
                        current: 1,
                        size: this.size
                    }).then(res => {
                        if (res.code == 200) {
                            this.list = res.data.treasure.records;
                            this.listLength = res.data.treasure.records.length;
                            this.total = res.data.treasure.total;
                        }
                    })
                } else { // 精选抽奖
                    recreation.getTreasureType({
                        current: 1,
                        size: this.size
                    }).then(res => {
                        if (res.code == 200) {
                            this.list = res.data.treasure.records;
                            this.listLength = res.data.treasure.records.length;
                            this.total = res.data.treasure.total;
                        }
                    })
                }
            },
            onRefresh() { // 下拉刷新
                this.getList();
                setTimeout(() => {
                    this.$toast({
                        duration: 800,
                        message: this.$t('More.v8')
                    });
                    this.isLoading = false;
                }, 500);
            },
            onLoad() { // 上拉加载
                this.getList();
                // 异步更新数据
                setTimeout(() => {
                    if (this.total > this.listLength) {
                        this.size += 10;
                        this.loading = false;
                    } else {
                        // 加载状态结束
                        this.finished = true;
                        this.loading = false;
                    }
                }, 500);
            }
        },
        destroyed() {
            clearInterval(this.myInterval);
        },
        filters: {}
    }
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .head {
    background: white;
    color: black;
  }

  .head .return:after {
    border-color: black;
  }

  .product {
    padding: 10px;
  }

  .van-count-down, .van-divider {
    line-height: 20px;
    color: #f94951;
  }
</style>
